<template>
  <swiper :options="swiperOptionFilt" ref="recentContact">
    <!-- slides -->
    <swiper-slide class="m-sw" v-for="item in items" :key="item.id">
      <div class="flex sw-item">
        <div class="con-l">
          <div class="pic-box">
            <img :src="item.pic" alt="头像">
          </div>
        </div>
        <div class="con-r">
          <p class="con-name mui-ellipsis" :class="[item.sex === 1 ? 'boy' : 'girl']" v-text="item.nickname">用户名</p>
          <p class="con-rest mui-ellipsis">{{item.age}}岁|{{item.education}}|{{item.level}}</p>
        </div>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "friends-list",
    props: {
      items: {
        type: Array,
        required: true,
        default: []
      }
    },
    data () {
      return {
        swiperOptionFilt: {
          loop: false,
          slidesPerView: 3,
          slidesPerColumn: 3,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.recentContact.swiper
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    background-color: #eee;
    @include mh-avatar-box(3rem, 3rem)
  }
  .con-rest {position: relative;@include sc(1.2rem, #999)}
  .con-name {position: relative;@include sc(1.3rem, #333)}
  .panel-content .m-sw {margin-right: 0;}
  .m-sw {width: 33%!important;margin-right: 0!important;}
  .boy:after,.girl:after {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    content: '';
    vertical-align: middle;
  }
  .boy:after {
    background: url("../../assets/images/hnico/ic_boy.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .girl:after {
    background: url("../../assets/images/hnico/ic_girl.png") no-repeat center center;
    background-size: 100% 100%;
  }
</style>
